<template>
  <el-card>
    <div slot="header">
      <div class="header-title">
        <span>线上热门搜索</span>
        <svg t="1642583083161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5478" width="16" height="16"><path d="M150.528 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0zM519.168 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0zM887.808 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0z" p-id="5479" /></svg>
      </div>
    </div>
    <div class="conter">
      <!-- 数据可视化 -->
      <el-row :gutter="10">
        <el-col :span="12"><lineCharts /></el-col>
        <el-col :span="12"><lineCharts /></el-col>
      </el-row>
      <!-- 表格 -->
      <el-row :gutter="10">
        <el-table
          :data="tableData"
          style="width: 100%"
          border=""
          size="mini"
        >
          <el-table-column
            prop="date"
            label="排名"
            width="80"
          />
          <el-table-column
            prop="name"
            label="搜索关键字"
            width="180"
          />
          <el-table-column
            prop="address"
            label="用户数"
            sortable
          />
          <el-table-column
            prop="address"
            label="周涨幅"
            sortable
          />
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row :gutter="10">
        <el-pagination
          class="pagination"
          layout="prev, pager, next"
          :total="1000"
        />
      </el-row>
    </div>
  </el-card>
</template>

<script>
import lineCharts from './lineCharts'
export default {
  components: {
    lineCharts
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>

<style scoped>
.header-title{
    display: flex;
    justify-content: space-between;
}
.conter{
    border-top: 1px solid #eee;
    padding: 10px;
}
.pagination{
    text-align: right;
}
</style>
